<template>
  <div class="wh100">
    <el-row class="wh100">

      <el-col class="wh100">

        <el-menu class="menu menu-c" default-active="1" :collapse="isCollapse" @select="itemClick">

          <template v-for="(item,index) in menu">

            <el-menu-item :index="index" :key="index" v-if="item.type == 1">
              <i :class=item.icon v-if="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>

            <el-submenu :index="index" :key="index" v-if="item.type == 2">
              <template slot="title">
                <i :class=item.icon v-if="item.icon"></i>
                <span>{{item.title}}</span>
              </template>

              <el-menu-item-group>
                <el-menu-item class="sub-item"
                              v-for="(submenu,subIndex) in item.submenu"
                              :key="'sub'+subIndex"
                              :index="index + '-' + subIndex">
                  {{submenu.title}}
                </el-menu-item>
              </el-menu-item-group>

            </el-submenu>

          </template>


        </el-menu>

      </el-col>

    </el-row>
  </div>
</template>

<script>
  /*
  * type 1 单层菜单  2 子级菜单
  */
  export default {
    props: {
      menu: {
        default: []
      },
    },
    data() {
      return {
        isCollapse:false
      }
    },
    methods: {
      itemClick(item){
      },
      closeMenu(){
        //收缩菜单
        this.isCollapse = false;
      }
    },
  }
</script>

